<template>
  <div class="product-item">
    <el-image :src="obj.src" @click="getDetail">
      <div slot="placeholder" class="image-slot">
        <i class="el-icon-loading"></i>
      </div>
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div class="prodect-info-top" v-if="isTop">
      <h3>{{ obj.title }}</h3>
      <span>{{ "Shop now" }}</span>
    </div>
    <div class="product-info" v-else>
      <div>
        <p @click="getDetail">{{ obj.content }}</p>
        <i v-if="collection" class="iconfont icon-heart"></i>
      </div>
      <span>{{ "$" + obj.price }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      default: () => {
        return {
          src: "",
          content: "",
          price: 0,
          title: "",
					id: null
        };
      }
    },
    isTop: {
      type: Boolean,
      default: () => false
		},
    collection: {
      type: Boolean,
      default: () => false
		}
  },
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
		getDetail() {
			this.$router.push({path: '/product/detail', query: {id: this.obj.id}});
			sessionStorage.setItem('productInfo', JSON.stringify(this.obj));
		}
	},

  watch: {}
};
</script>
<style lang="scss" scoped>
.product-item {
  position: relative;
	margin-bottom: 16px;
	.el-image {
		cursor: pointer;
	}
  .product-info {
    width: 100%;
    padding: 17px 16px 10px;
    font-weight: 400;
    font-size: 14px;
    & > div {
			display: flex;
      & > p {
        width: 100%;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        color: #1a1a1a;
        margin-bottom: 4px;
      }
    }

    & > span {
      color: #666;
    }
  }
  .prodect-info-top {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 16px;
    color: #fff;
    h3 {
      font-size: 22px;
      margin: 0;
      font-weight: 500;
      color: #fff;
    }
    span {
      text-decoration: underline;
    }
  }
}
</style>
